<template>
  <div  class="photoifo-container">
    <h3>{{photoinfo.title}}</h3>
    <p class="subtitle">
        <span>发表时间：{{photoinfo.add_time|dateFormat}}</span>
        <span>点击：{{photoinfo.click}}次</span>
    </p>
    <hr>
<!-- 缩略图区域 -->
<div class="thumbs">
  <vue-preview :slides="list"></vue-preview>
</div>
<!-- 图片内容区域 -->
<div class="content" v-html="photoinfo.content"></div>

<!-- 放置一个评论子组件 -->
    <cmt-box :id="id"></cmt-box>
  </div>
</template>

<script>
import comment from '../subcomponents/comment.vue'
export default {

  data () {
    return {
        id:this.$route.params.id,
        photoinfo:{},
        list:[]
    }
  },

  methods: {
      getPhotoInfo(){
          this.$http.get("api/getimageInfo/"+this.id).then(result=>{
              if(result.body.status==0){
                  this.photoinfo=result.body.message[0]    
              }
              
          })
      },
      getThumbs(){
          this.$http.get('api/getthumimages/'+this.id).then(result=>{
              if(result.body.status==0){
                  result.body.message.forEach(item => {
                      item.msrc=item.src
                      item.w=600
                      item.h=400
                  });
                  this.list=result.body.message
              }
          })
      }
  },

  created () {
      this.getPhotoInfo()
      this.getThumbs()
  },
  components:{
      'cmt-box':comment
  }
}
</script>

<style lang='less'>
.photoifo-container{
       padding: 3px;
    h3 {
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }

    .content {
        font-size: 13px;
        line-height: 30px;
    }

    .thumbs{
        img{
        margin: 10px;
        box-shadow: 0 0 8px #999;
        }
    }
}
.my-gallery{
    overflow: hidden;
    figure{
        width: 25%;
        margin: 10px;
        float: left;
        img{
            width: 100%;
        }
    }
}

</style>
